<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var pathSymbols = {
    reindeer: 'path://M142.3,32c-8.7,0-15.8,7.2-15.8,16c0,2.1,0.4,4.1,1.1,5.9L102.8,64L86.1,30.3c5.2-2.6,8.7-8,8.7-14.3c0-8.8-7.1-16-15.8-16c-8.7,0-15.8,7.2-15.8,16c0,6.3,3.6,11.7,8.7,14.3L55.3,64L30.5,53.9c0.7-1.8,1.1-3.8,1.1-5.9c0-8.8-7.1-16-15.8-16S0,39.2,0,48c0,8.8,7.1,16,15.8,16c0.9,0,1.8-0.1,2.6-0.2l8.4,50.6c0.8,8,7.9,13.6,15,13.6h73.5c7.9,0,14.2-5.6,15.8-13.6l8.4-50.6c0.9,0.2,1.7,0.2,2.6,0.2c8.7,0,15.8-7.2,15.8-16C158.1,39.2,151,32,142.3,32z M91.9,110.2c-3,4.5-7.1,6.7-12.5,6.7c-5.1,0-9-2.1-11.8-6.3c-2.8-4.2-4.2-10.4-4.2-18.5c0-8.8,1.5-15.5,4.4-20c2.9-4.5,7.2-6.8,12.7-6.8c10.6,0,15.9,8.5,15.9,25.6C96.4,99.3,94.9,105.7,91.9,110.2z',
    rocket: 'path://M142.3,32c-8.7,0-15.8,7.2-15.8,16c0,2.1,0.4,4.1,1.1,5.9L102.8,64L86.1,30.3c5.2-2.6,8.7-8,8.7-14.3c0-8.8-7.1-16-15.8-16c-8.7,0-15.8,7.2-15.8,16c0,6.3,3.6,11.7,8.7,14.3L55.3,64L30.5,53.9c0.7-1.8,1.1-3.8,1.1-5.9c0-8.8-7.1-16-15.8-16S0,39.2,0,48c0,8.8,7.1,16,15.8,16c0.9,0,1.8-0.1,2.6-0.2l8.4,50.6c0.8,8,7.9,13.6,15,13.6h73.5c7.9,0,14.2-5.6,15.8-13.6l8.4-50.6c0.9,0.2,1.7,0.2,2.6,0.2c8.7,0,15.8-7.2,15.8-16C158.1,39.2,151,32,142.3,32z M85.1,116h-6.3V73.3c-1,1-2.7,2.1-5,3.3s-4.5,2.1-6.5,2.6V73c2.6-0.7,5.5-1.9,8.5-3.5c3-1.6,5.3-3.1,6.9-4.5h2.4V116z',
    plane: 'path://M142.3,32c-8.7,0-15.8,7.2-15.8,16c0,2.1,0.4,4.1,1.1,5.9L102.8,64L86.1,30.3c5.2-2.6,8.7-8,8.7-14.3c0-8.8-7.1-16-15.8-16c-8.7,0-15.8,7.2-15.8,16c0,6.3,3.6,11.7,8.7,14.3L55.3,64L30.5,53.9c0.7-1.8,1.1-3.8,1.1-5.9c0-8.8-7.1-16-15.8-16S0,39.2,0,48c0,8.8,7.1,16,15.8,16c0.9,0,1.8-0.1,2.6-0.2l8.4,50.6c0.8,8,7.9,13.6,15,13.6h73.5c7.9,0,14.2-5.6,15.8-13.6l8.4-50.6c0.9,0.2,1.7,0.2,2.6,0.2c8.7,0,15.8-7.2,15.8-16C158.1,39.2,151,32,142.3,32z M95.7,116H64.3v-2.5c0-2.9,0.4-5.3,1.2-7.3c0.8-2,2.1-4,3.9-5.9c1.8-1.9,4.6-4.2,8.4-6.8c3.9-2.8,6.6-5.2,8-7.2c1.4-2.1,2.1-4.4,2.1-7.1c0-2.7-0.8-4.8-2.5-6.3c-1.7-1.5-4-2.3-6.9-2.3c-2.1,0-4.1,0.5-6.3,1.6c-2.1,1.1-4.1,2.6-5.9,4.5v-6.1c1.6-1.7,3.5-3,5.6-3.9c2.1-0.9,4.5-1.4,7.3-1.4c4.5,0,8.1,1.2,10.9,3.6c2.8,2.4,4.1,5.7,4.1,9.8c0,3.7-0.8,6.9-2.5,9.5s-4.6,5.4-8.7,8.3c-4.2,2.9-7,4.9-8.4,6.2c-1.4,1.2-2.4,2.4-2.9,3.6c-0.6,1.1-0.8,2.5-0.8,4.2h24.8V116z',
    train: 'path://M142.3,32c-8.7,0-15.8,7.2-15.8,16c0,2.1,0.4,4.1,1.1,5.9L102.8,64L86.1,30.3c5.2-2.6,8.7-8,8.7-14.3c0-8.8-7.1-16-15.8-16c-8.7,0-15.8,7.2-15.8,16c0,6.3,3.6,11.7,8.7,14.3L55.3,64L30.5,53.9c0.7-1.8,1.1-3.8,1.1-5.9c0-8.8-7.1-16-15.8-16S0,39.2,0,48c0,8.8,7.1,16,15.8,16c0.9,0,1.8-0.1,2.6-0.2l8.4,50.6c0.8,8,7.9,13.6,15,13.6h73.5c7.9,0,14.2-5.6,15.8-13.6l8.4-50.6c0.9,0.2,1.7,0.2,2.6,0.2c8.7,0,15.8-7.2,15.8-16C158.1,39.2,151,32,142.3,32z M89.5,112.7c-3.2,2.8-7.5,4.1-12.9,4.1c-4.7,0-8.5-0.9-11.4-2.6v-6.5c3.4,2.6,7.3,4,11.6,4c3.4,0,6.2-0.8,8.2-2.5c2-1.7,3-3.9,3-6.8c0-6.3-4.5-9.5-13.6-9.5h-4.2v-5.2h4c8,0,12-3,12-8.9c0-5.5-3.1-8.2-9.2-8.2c-3.5,0-6.8,1.2-9.9,3.5v-6c3.3-1.9,7.1-2.8,11.4-2.8c4.3,0,7.7,1.1,10.2,3.3c2.6,2.2,3.9,5.1,3.9,8.7c0,6.5-3.3,10.7-10,12.6V90c3.6,0.4,6.5,1.7,8.6,3.8c2.1,2.2,3.1,4.9,3.1,8.1C94.3,106.3,92.7,110,89.5,112.7z',
    ship: 'path://M142.3,32c-8.7,0-15.8,7.2-15.8,16c0,2.1,0.4,4.1,1.1,5.9L102.8,64L86.1,30.3c5.2-2.6,8.7-8,8.7-14.3c0-8.8-7.1-16-15.8-16c-8.7,0-15.8,7.2-15.8,16c0,6.3,3.6,11.7,8.7,14.3L55.3,64L30.5,53.9c0.7-1.8,1.1-3.8,1.1-5.9c0-8.8-7.1-16-15.8-16S0,39.2,0,48c0,8.8,7.1,16,15.8,16c0.9,0,1.8-0.1,2.6-0.2l8.4,50.6c0.8,8,7.9,13.6,15,13.6h73.5c7.9,0,14.2-5.6,15.8-13.6l8.4-50.6c0.9,0.2,1.7,0.2,2.6,0.2c8.7,0,15.8-7.2,15.8-16C158.1,39.2,151,32,142.3,32z M97.9,104.3h-7.5V116h-6.1v-11.7H61v-4.9c4.1-4.7,8.3-10,12.5-16.1c4.2-6.1,7.6-11.8,10.4-17.1h6.5v33h7.5V104.3z',
    car: 'path://M256.3,299c-8.7,0-15.8,7.2-15.8,16c0,2.1,0.4,4.1,1.1,5.9L216.8,331l-16.6-33.7c5.2-2.6,8.7-8,8.7-14.3c0-8.8-7.1-16-15.8-16c-8.7,0-15.8,7.2-15.8,16c0,6.3,3.6,11.7,8.7,14.3L169.3,331l-24.9-10.1c0.7-1.8,1.1-3.8,1.1-5.9c0-8.8-7.1-16-15.8-16s-15.8,7.2-15.8,16c0,8.8,7.1,16,15.8,16c0.9,0,1.8-0.1,2.6-0.2l8.4,50.6c0.8,8,7.9,13.6,15,13.6h73.5c7.9,0,14.2-5.6,15.8-13.6l8.4-50.6c0.9,0.2,1.7,0.2,2.6,0.2c8.7,0,15.8-7.2,15.8-16C272.1,306.2,265,299,256.3,299z M202.2,381.5c-3.1,2.9-7.3,4.3-12.6,4.3c-4.5,0-7.9-0.7-10.2-2v-6.3c3.3,2.1,6.6,3.2,10,3.2c3.4,0,6.1-0.9,8.2-2.8c2.1-1.9,3.1-4.3,3.1-7.4c0-3.1-1.1-5.5-3.2-7.2s-5.2-2.6-9.1-2.6c-3,0-5.8,0.1-8.2,0.4l1.8-24.6h22.6v5.4h-17.5l-1,13.7l4.4-0.2c5.1,0,9.2,1.3,12.1,3.8c2.9,2.6,4.4,6.1,4.4,10.7C206.9,374.8,205.4,378.6,202.2,381.5z'
 };

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: function (params) {
            return params[0].name + ': ' + params[0].value;
        }
    },
    xAxis: {
        data: ['星等级0', '星等级1', '星等级2', '星等级3', '星等级4', '星等级5' ],
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            color: '#e54035'
        }
    },
    yAxis: {
        splitLine: {show: false},
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {show: false}
    },
    color: ['#e54035'],
    series: [{
        name: 'hill',
        type: 'pictorialBar',
        barCategoryGap: '-130%',
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
            opacity: 0.5
        },
        emphasis: {
            itemStyle: {
                opacity: 1
            }
        },
        data: [411, 187, 98, 59, 18, 5],
        z: 10
    }, {
        name: 'glyph',
        type: 'pictorialBar',
        barGap: '-100%',
        symbolPosition: 'end',
        symbolSize: 50,
        symbolOffset: [0, '-120%'],
        data: [{
            value: 411,
            symbol: pathSymbols.reindeer,
            symbolSize: [40, 36]
        }, {
            value: 187,
            symbol: pathSymbols.rocket,
            symbolSize: [40, 36]
        }, {
            value: 98,
            symbol: pathSymbols.plane,
            symbolSize: [40, 36]
        }, {
            value: 59,
            symbol: pathSymbols.train,
            symbolSize: [38, 32]
        }, {
            value: 18,
            symbol: pathSymbols.ship,
            symbolSize: [35, 30]
        }, {
            value: 5,
            symbol: pathSymbols.car,
            symbolSize: [35, 30]
        }]
    }]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>